<template>
	<view>
		<ttBar :title="showType==0?className:storeName"  leftIcon="icon-back"></ttBar>
		<screen-bar :isFiexd="false" :top="0" :cntHeight="top"></screen-bar>
		<scroll-view scroll-y="true" :style="{'height':top+'px'}" @scrolltolower="getData">
			<goodList v-if="listData.length>0" :goodData="listData"></goodList>
			<emptyBox v-if="listData.length<1" :isLoding="loding"></emptyBox>
		</scroll-view>
		
	</view>
</template>

<script>
	import ttBar from "@/components/ttBar/ttBar.vue";
	import goodList from "@/components/goodList/goodList.vue";
	import emptyBox from "@/components/emptyBox/emptyBox.vue";
	import screenBar from "@/pagesA/components/screenBar4/screenBar4.vue";
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from "vuex";
	export default {
		computed: {
			...mapState({
				locationCity:state=>state.map.locationCity,
				selectCity:state=>state.map.selectCity,
				roads: state => state.map.roads
			})
		},
		components: {
			ttBar,
			goodList,
			emptyBox,
			screenBar
		},
		data() {
			return {
				top: uni.getSystemInfoSync().screenHeight-uni.getSystemInfoSync().statusBarHeight-uni.upx2px(168),
				classId:0,
				className:'',
				showType:0	,//0 分类，  1店铺
				hasNext:true,
				storeId:0,
				storeName:'',
				listData:[],
				firCid:0,
				secCid:0,
				thirCid:0,
				classInfo:{},
				searchList:[],
				rmdFilter: {
					page_no: 1,
					page_size: 10,
					areaId: 0
				},
				loding:true
			};
		},
		methods:{
			getData(){
				this.rmdFilter.areaId = this.selectCity.cityCode;
				if(this.hasNext){
					if(this.showType==0){
					
						this.rmdFilter.firCate=this.rmdFilter.firCate?this.rmdFilter.firCate:0;
						this.rmdFilter.secCate=this.rmdFilter.secCate?this.rmdFilter.secCate:0;
						this.rmdFilter.thirCate=this.rmdFilter.thirCate?this.rmdFilter.thirCate:0;
					}else{
						this.rmdFilter.storeId=this.storeId;
					}
					this.loding=true;
					this.$store.dispatch("apiSearchGood",this.rmdFilter)
					.then(res=>{
						this.listData=this.listData.concat(res.data.data.items);
						this.rmdFilter.page_no = res.data.data.nextPage;
						this.hasNext=res.data.data.hasNext;
						this.loding=false;
					})
				}else{
					uni.showToast({
						title: '没有更多的数据了',
						icon: 'none'
					});
				}
				
			}
		},
		onLoad(cfm) {
			
			this.showType=parseInt(cfm.type);
			if(this.showType==0){
				this.classInfo=cfm
				this.className=cfm.cname;
				if(cfm.firCate){
					this.rmdFilter.firCate=cfm.firCate
				}
				if(cfm.secCate){
					this.rmdFilter.secCate=cfm.secCate
				}
				if(cfm.thirCate){
					this.rmdFilter.thirCate=cfm.thirCate
				}
			}else{
				this.storeId=cfm.sid;
				this.storeName=cfm.sname;
			}
			this.getData()
			
			// 监听区域选择
			uni.$on("changeArea4", payload => {
				this.listData = [];
				this.rmdFilter.page_no = 1;
				this.hasNext = true;
				this.rmdFilter.areaId = payload.areaId
				delete this.rmdFilter.streetId
				this.getData();
			})
			// 监听商圈选择
			uni.$on("changeStreet4", payload => {
				this.listData = [];
				this.rmdFilter.page_no = 1;
				this.hasNext = true;
				this.rmdFilter.streetId = payload.streetId,
				this.rmdFilter.areaId = payload.areaId.toString().substr(0, 4)
				this.getData();
			})
			// 监听距离排序
			uni.$on("rankChange4", payload => {
				this.listData = [];
				this.rmdFilter.page_no = 1;
				this.hasNext = true;
				if (payload.type == 0) {
					delete this.rmdFilter.orderBy;
					delete this.rmdFilter.longi;
					delete this.rmdFilter.lati;
				} else {
					this.rmdFilter.orderBy = payload.type
					if (payload.type == 5) {
						this.rmdFilter.longi = this.roads.longitude;
						this.rmdFilter.lati = this.roads.latitude;
					} else {
						delete this.rmdFilter.longi;
						delete this.rmdFilter.lati;
					}
				}
				// console.log(this.rmdFilter);
				this.getData();
			})
			// 监听分类选择
			uni.$on("classChange4", payload => {
				this.listData = [];
				this.rmdFilter.page_no = 1;
				this.hasNext = true;
				if (payload.type == 'firCate') {
					delete this.rmdFilter.secCate;
					delete this.rmdFilter.thirCate;
					this.rmdFilter.firCate = payload.firCate;
			
				} else if (payload.type == 'secCate') {
					delete this.rmdFilter.thirCate;
					this.rmdFilter.firCate = payload.firCate;
					this.rmdFilter.secCate = payload.secCate;
				} else {
					this.rmdFilter.firCate = payload.firCate;
					this.rmdFilter.secCate = payload.secCate;
					this.rmdFilter.thirCate = payload.thirCate;
				}
				this.className=payload.cname;
				this.getData();
			})
			// 监听筛选选择
			uni.$on("changeScreen4", payload => {
				this.listData = [];
				this.rmdFilter.page_no = 1;
				this.hasNext = true;
				if (payload.hasOwnProperty('type')) {
					this.rmdFilter.type = payload.type
				} else {
					delete this.rmdFilter.type
				}
				if (payload.hasOwnProperty('percent')) {
					this.rmdFilter.percent = payload.percent
				} else {
					delete this.rmdFilter.percent
				}
				if (payload.hasOwnProperty('age')) {
					this.rmdFilter.age = payload.age
				} else {
					delete this.rmdFilter.age
				}
				if (payload.hasOwnProperty('price1')) {
					this.rmdFilter.price1 = payload.price1
				} else {
					delete this.rmdFilter.price1
				}
				if (payload.hasOwnProperty('price2')) {
					this.rmdFilter.price2 = payload.price2
				} else {
					delete this.rmdFilter.price2
				}
				this.getData();
			
			})
			
			
		},
		onReachBottom() {
			this.getData()
		},
		// 下拉刷新
		onPullDownRefresh() {
			setTimeout(() => {
				this.listData=[];
				this.rmdFilter.page_no=1;
				this.hasNext=true;
				this.getData()
				uni.stopPullDownRefresh();
			}, 1500)
		}
	}
</script>

<style lang="less">
page{
	background-color: #f6f6f6;
}
</style>
